<template>
  <div class="skill_group_monitor" :style="screenHeight">
    <Spin size="large" fix v-if="spinShow"><Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon><div>正在加载中...</div></Spin>
    <div class="demo-split">
        <div class="demo-split-pane" style="float:left;width:30%;">
          <div class="ztree" id="skillGroupTree"></div>
        </div>
        <div  class="demo-split-pane" style="float:right;width:70%;border-left:1px solid #eeeeee;">
          <div class="fixed_table">
            <div style="display:flex;width:80%">
              <div style="float: left;margin-right:10%">当前技能组号码:{{queueNumber}}</div>
              <Select v-model="autoRefreshTime" filterable @on-change="autoRefreshMonitor" title="自动刷新时间">
                <Option v-for="item in autoRefreshList" :value="item.time" :key="item.id">{{ item.name }}</Option>
              </Select>
              <span style="color: red;font-size:20px;margin-left:10px" title="刷新倒计时">{{countdownTime}}</span>
            </div>
            <div>
              <el-table :data="infoTableList">
                <el-table-column
                  prop="status"
                  label="状态">
                </el-table-column>
                <el-table-column
                  prop="caller"
                  label="主叫号码">
                </el-table-column>
                <el-table-column
                  prop="callee"
                  label="被叫号码">
                </el-table-column>
                <el-table-column
                  prop="callType"
                  label="呼叫类型">
                </el-table-column>
                <el-table-column
                  prop="customerType"
                  label="客户类型">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import * as CtiClient from '../assets/js/ctiClient.js';
  export default {
    name: "SkillGroupMonitor",
    mixins:[],
    props:{
      pageCode:String
    },
    data(){
      return {
        autoRefreshTime:'0',
        showPageCount:0,
        split: 0.3,
        spinShow:false,
        Interval:'',
        currentBusid:'',
        queueNumber:'',
        inspectTreeData:[{"id":2,"pId":0,"name":"技能组","open":true,"isParent":true,"busid":"-1"}],
        tableHeight:{height:''},
        screenHeight:{height:''},
        infoTableList:[],
        skillList:'',
        countdownTime:0,
        autoRefreshList:[{time: '0', name: '停止自动刷新'},{time: '5', name: '5秒自动刷新'},{time: '10', name: '10秒自动刷新'},{time: '15', name: '15秒自动刷新'},{time: '20', name: '20秒自动刷新'},{time: '25', name: '25秒自动刷新'},{time: '30', name: '30秒自动刷新'}],
      }
    },
    methods:{
      autoRefresh:function(){
        if(!this.currentBusid){
          this.currentBusid = this.queueNumber;
        }
        window.opener.sendMessage('get_customer_of_queue',this.currentBusid)
      },
      initSearch:function (event) {
        
        this.infoTableList=[];
        let customer_status =event.customer_status.split(",");
        let customer_num =event.customer_num.split(",");
        let callee_num =event.callcenter_num.split(",");
        let call_type =event.call_type.split(",");
        let customer_type =event.customer_type.split(",");
        let queueNumList =event.queue_num.split(",");
        this.queueNumber=event.queueNumLstStr;
        for (let i=0;i<queueNumList.length;i++){
          let status='';
          let customerType="";
          let callType="";
          let caller=customer_num[i];//主叫号码
          let callee=callee_num[i];//被叫号码
          if (customer_status[i] == "Waiting"){
              status= "等待";
          }
          if (customer_status[i] == "Trying"){
              status= "振铃";
          }
          if (customer_type[i] == "1"){
             customerType= "普通客户";
          }
          if (customer_type[i] == "2"){
             customerType= "VIP客户";
          }
          if (customer_type[i] == "3"){
              customerType= "重进入客户";
          }
          if (call_type[i] == "0"){
              callType= "呼入";
          }
          if (call_type[i] == "1"){
              callType= "预测式呼出";
          }
          let param={
            status:status,
            customerType:customerType,
            callType:callType,
            caller:caller,
            callee:callee
          };
          if(status || customerType || callType || caller || callee){
            this.infoTableList.push(param);
          }
        }
      },
      //设备树初始化
      initSkillGroupTree:function (queueList) {
        let count=200;
        for (let i=0;i<queueList.length;i++){
          let name=queueList[i].name;
          let num=queueList[i].queueNum;
          let treeStr={
            id:count++,
            pId:2,
            name:name,
            open:false,
            isParent:false,
            busid:num
          };
          this.inspectTreeData.push(treeStr);
          this.queueNumber += (num+",");
        }
        this.queueNumber = this.queueNumber.substring(0,this.queueNumber.lastIndexOf(','));
        let that=this;
        let setting = {
          view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
          },
          data: {
            simpleData: {
              enable:true,
              idKey: "id",
              pIdKey: "pId",
              rootPId: ""
            }
          },
          callback: {
            onClick: zTreeOnClick
          }
        };
        function zTreeOnClick(event,treeId,treeNode) {
          if(treeNode.pId!=0){
            if(!treeNode.busid){
              that.$Message.info("该监控下,没有数据");
              return false;
            }
            that.currentBusid=treeNode.busid;
            window.opener.sendMessage('get_customer_of_queue',treeNode.busid)
          }
        }
        let zNodes =this.inspectTreeData;
        if (zNodes){
          $(document).ready(function(){
            $.fn.zTree.init($("#skillGroupTree"), setting, zNodes);//t:用于展现 zTree 的 DOM 容器,setting:zTree 的配置数据,zNodes:zTree 的节点数据
          });
        }
      },
      monitorSkillData:function (event) {
        let retCode=event.retCode;
        if(retCode!='0'){
          this.$Modal.info({
            title:'提示',
            content:event.reason
          });
          return false;
        }
        let eventMethod=event.method;
        if(eventMethod=="get_customer_of_queue"){//获取技能组监控信息
          this.initSearch(event);
        }
      },
      //切换刷新时间
      autoRefreshMonitor:function(){
        let val=this.autoRefreshTime;
        this.historyRefreshTime=this.autoRefreshTime;
        let that=this;
        let reg=/^[0-9]*$/;
        if(val=='0'){
          clearInterval(this.Interval);
          this.countdownTime="0";
          return false;
        }
        clearInterval(this.Interval);
        if(reg.test(val)){
          val=parseInt(val);
          this.countdownTime=parseInt(val);
          this.Interval= setInterval(() =>{
            that.initCountdown();
          },1000);
        }
      },
      initCountdown:function () {
        this.countdownTime=this.countdownTime-1;
        if(this.countdownTime==0){
          this.countdownTime=parseInt(this.autoRefreshTime);
          this.autoRefresh();
          return false;
        }
      },
    },
    mounted(){
      if(localStorage.getItem('skillGroup')){
        this.initSkillGroupTree(JSON.parse(localStorage.getItem('skillGroup')));
      }
      window.monitorSkillData = this.monitorSkillData;
      window.document.title = "技能组监控";
    },
    created(){
      // this.screenHeight.height=this.mountHeight(92);
      // this.tableHeight.height=this.mountHeight(230);
      
    },
    destroyed(){
      clearInterval(this.Interval);
      this.autoRefreshTime="0";
      this.autoRefreshMonitor();
    },
  }
</script>

<style scoped>
  .demo-split{
    border: 1px solid #dcdee2;
  }
  .demo-split-pane{
    padding: 10px;
  }
</style>
